<template>
  <div ref="print" v-show="isPreview">
    <div class="print-wrap-body" style="width: 99%;margin: 20px auto 0;">
      <table style="border-collapse:collapse;" width="100%">
        <tbody>
          <tr height="50px">
            <td rowspan="1" colspan="8" valign="center" style="font-weight:bold;font-size: 30px;width:100%;text-align:center;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;">服务站索赔旧件清单</td>
          </tr>
          <tr height="40px">
            <td rowspan="1" colspan="2" valign="center" style="font-weight:bold;font-size: 16px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;width:25%">服务站代码：{{list[0] ? list[0].dealer : ''}}</td>
            <td rowspan="1" colspan="4" valign="center" style="font-weight:bold;font-size: 16px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;width:50%">服务站名称：{{list[0] ? list && list[0].dealerName : ''}}</td>
            <td rowspan="1" colspan="2" valign="center" style="font-weight:bold;font-size: 16px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;width:25%">月份：{{nowTime}}</td>
          </tr>
          <tr height="40px">
            <td valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;">序号</td>
            <td valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;">索赔单号</td>
            <td valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;">索赔旧件代码</td>
            <td valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;">索赔旧件名称</td>
            <td valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;">应返数量</td>
            <td valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;">供应商编码</td>
            <td valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;">数量</td>
            <td valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;">备注（箱号）</td>
          </tr>
          <tr height="30px" v-for="(item,index) in list" :key="index">
            <td valign="center" style="font-weight:400;font-size: 14px;text-align:center;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;width:5%">{{index + 1}}</td>
            <td valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;width:20%">{{item.claimNo}}</td>
            <td valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;width:15%">{{item.partCode}}</td>
            <td valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;width:18%">{{item.partsName}}</td>
            <td valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;width:10%">{{item.number}}</td>
            <td valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;width:12%">{{item.supCode}}</td>
            <td valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;width:7%"> </td>
            <td valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;width:13%"> </td>
          </tr>
          <tr height="30px">
            <td rowspan="1" colspan="3" valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;">打印人：</td>
            <td rowspan="1" colspan="5" valign="center" style="font-weight:400;font-size: 14px;text-align:left;color:#000000;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;border-left:solid #000 1px;">打印日期：</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  name: 'templateWaitReturnLabelList',
  props: {
    //传值 从上一页
    data: {
      type: Object,
      required: true,
      default() {
        return {};
      }
    },
    isPreview: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      nowTime: moment().format('YYYY-MM-DD'),
      list: []
    };
  },
  computed: {},
  created() { },
  mounted() {
    this.list = this.data.rows;
    this.$nextTick(function () {
      //必须写
      console.log('this.list 渲染数据 =>', this.list,this.data);
      this.$emit('onPrintTable', this.$refs.print.innerHTML);
    });
    if (this.isPreview) {
      this.fillInToDom();
    }
  },
  methods: {
    fillInToDom() {
      this.isPreview = true;
    },


  }
};
</script>

<style>
.print-wrap-body{
  width: 96%;
  margin: 10px auto 0;
}
</style>
